<template>
  <div class="page-filter">
    <div class="page-filter-right">
      <a-select
        v-model:value="recordState.admin_id"
        show-search
        allowClear
        placeholder="全部账户"
        class="select-m-r-24"
        :options="options"
        :filter-option="filterOption"
        @change="handleChange"
        :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
      >
      </a-select>
      <div class="page-filter-right-date">
        <span>登录时间</span>
        <a-range-picker v-model:value="dateTime" :value-format="dateFormat" @change="handleDateChange" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { recordState } from '../state'
import type { SelectProps } from 'ant-design-vue'
import type { Dayjs } from 'dayjs'
import { formatToUnix } from '@/utils/format'
import { onMounted, ref } from 'vue'
import apis from '@/apis'
const defaultValue = ref<[Dayjs, Dayjs]>()
const dateTime = ref<[Dayjs, Dayjs]>()
const dateFormat = 'YYYY-MM-DD'
const options = ref<SelectProps['options']>([])
const emit = defineEmits(['update-list'])
//日期
const handleDateChange = (dates: [Dayjs, Dayjs], dateString: string[]) => {
  console.log('dates: ', dates)
  console.log('dateString: ', dateString)
  if (!dates) {
    recordState.time_start = undefined
    recordState.time_end = undefined
    emit('update-list')
  }
  if (!dateString[0]) return (recordState.time_start = undefined)
  recordState.time_start = formatToUnix(dateString[0] + '00:00:00')
  if (!dateString[1]) return (recordState.time_end = undefined)
  recordState.time_end = formatToUnix(dateString[1] + '23:59:59')
  emit('update-list')
  console.log('recordState: ', recordState)
}
const handleChange = (value: string) => {
  console.log('value: ', value)
  recordState.admin_id = value
  console.log('recordState: ', recordState.admin_id)
  emit('update-list')
}
const filterOption = (input: string, option: any) => {
  console.log('input: ', input, option)
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
const getUserLIst = () => {
  apis.permission.list().then((res: any) => {
    options.value = res.list.map((item: any) => {
      return { value: item.admin_id, label: item.user_name }
    })
  })
}
onMounted(() => {
  getUserLIst()
})
</script>

<style lang="less" scoped>
@common-color: #0083ff; // sea blue

.page-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;

  &-right {
    display: flex;
    align-items: center;

    &-date {
      display: flex;
      align-items: center;
      margin-top: 10px;

      span {
        margin-right: 16px;
      }
    }

    .select-m-r-24 {
      width: 196px;
      height: 32px;
      margin: 10px 24px 0 0;
    }

    .input-m-r-16 {
      height: 32px;
      margin: 10px 16px 0 0;
    }

    .btn-m-r-24 {
      margin: 10px 24px 0 0;
    }

    .m-r-8 {
      margin: 10px 8px 0 0;
    }
  }
}
</style>
